<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>物品租售</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-table-cell {
            height:auto;
        }

    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品名称:</label>
                        <div class="layui-input-inline">
                            <input name="goodsname" class="layui-input" placeholder="请输入商品名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">种类:</label>
                        <div class="layui-input-inline">
                            <input name="kind" class="layui-input" placeholder="请输入种类"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="tableSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary icon-btn">
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>
<div id="errorDiv" style="display: none;padding: 10px 5% 1px 10px;">
    <form action="" method="post" class="layui-form"  lay-filter="">

        <div class="layui-form-item">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-block" >
                    <input type="text" name="num" lay-verify="required" autocomplete="off"
                           class="layui-input input-radius" placeholder="请输入">
                </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block" >
                <input type="text" name = "orderid" value="${id}"  lay-verify="required" autocomplete="off"
                       class="layui-input input-radius layui-disabled" readonly placeholder="请输入">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">顾客姓名</label>
            <div class="layui-input-block" >
                <input type="text" name="username"             value="${username}" lay-verify="required" autocomplete="off"
                       class="layui-input input-radius layui-disabled" readonly placeholder="请输入">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-inline" style="text-align: center;padding-left: 18%">
                <button type="button" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="doSubmit2" id="doSubmit2"><i
                        class="layui-icon layui-icon-search layui-icon-normal"></i>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i
                        class="layui-icon layui-icon-refresh"></i><span>重置</span>
                </button>
            </div>
        </div>
    </form>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="goods:buy" lay-event="buy">购买</a>

    <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="goods:edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="goods:delete" lay-event="delete">删除</a>
</script>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'tableX', 'notice', 'xnUtil', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var form = layui.form;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;
        var laydate = layui.laydate;


        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#dataTable',
            url: getProjectUrl() + 'goods/page',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" perm-show="goods:add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="delete" perm-show="goods:delete" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [
                [
                    {type: 'checkbox'},

                    {field: 'id', hide: true},

                    {field: 'goodsname', title: '商品名称', sort: true},
                    {field: 'img', title: '商品图片', templet:function (d){
                            if(d.img!=null){
                                return '<div><img width=110 height=80  src="${ctxPath}/assets/img/defaultBucket/'+d.img+'.jpg"></div>';
                            }else {
                                return '';
                            }
                        }},
                    {field: 'saleprice', title: '售价', sort: true},
                    {field: 'num', title: '库存', sort: true},
                    {field: 'kind', title: '种类', sort: true},
                    {title: '操作', toolbar: '#tableBar', align: 'center', width: 200, minWidth: 200}
                ]
            ],
            done: function(res, curr, count) {
                xnUtil.tableDone(insTb, res, curr, count);
            }
        });

        /* 表格搜索 */
        form.on('submit(tableSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });




        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            /* 删除 */
            if (obj.event === 'delete') {
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    admin.req(getProjectUrl() + 'goods/delete', JSON.stringify([{'id': obj.data.id}]), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
            /* 编辑 */
            if (obj.event === 'edit') {
                showAddOrUpdateModel(obj.data);
            }
            if (obj.event === 'buy') {
                buy(obj.data);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(dataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showAddOrUpdateModel();
            }
            if (obj.event === 'delete') { // 删除
                var checkRows = table.checkStatus('dataTable');
                if (checkRows.data.length === 0) {
                    notice.msg('请选择要操作的数据', {icon: 2});
                    return;
                }
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    var ids = checkRows.data.map(function (d) {
                        return {"id": d.id};
                    });
                    admin.req(getProjectUrl() + 'goods/delete', JSON.stringify(ids), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
        });

        // 显示表单弹窗
        function showAddOrUpdateModel(data) {
            var layIndex = admin.open({
                title: (data ? '修改' : '添加') + '物品租售',
                url: getProjectUrl() + 'goods/form',
                area: ['800px',''],
                data: { data: data },     // 传递数据到表单页面
                end: function () {
                    var layerData = admin.getLayerData(layIndex, 'formOk');
                    if (layerData) {  // 判断表单操作成功标识
                        insTb.reload();  // 成功刷新表格
                    }
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $(layero).find('[lay-submit]').focus();
                }
            });
        }
        var layIndex;
        var tabledata ;
        function buy(data) {
            layIndex = layer.open({
                type:1,
                content:$("#errorDiv"),
                area:['400px','300px'],
                title:'信息录入',
                success:function () {
                    tabledata = data;
                }
            });
        }
        form.on("submit(doSubmit2)",function (data){
            var cost = (data.field.num*tabledata.saleprice);
            data.field.goodsname = tabledata.goodsname;
            data.field.cost = cost;
            data.field.saleprice = tabledata.saleprice;
//


            var num = tabledata.num-data.field.num;
            var num1 = num;
            console.log(tabledata.num+" "+data.field.num);
            if(num<0){
                alert("购买数量超出库存数量！");
                return false;
            }
  /*          $.get(getProjectUrl() +"getLoginUser",function(res){
                data.field.username=res.data.name;
                console.log(data.field.username);
            })*/

            admin.req(getProjectUrl() + 'border/buy', JSON.stringify(data.field), function(res){
                if (res.code==-1){
                    layer.msg("余额不足", {icon: 2, time: 1000}, function () {
                        layer.close(layIndex);
                        insTb.reload();
                    });
                }
                else{
                    var num = $('[name="num"]').val();
                layer.msg("购买成功{"+data.field.goodsname+'＊'+num+"}", {icon: 1, time: 1000}, function () {
                    layer.close(layIndex);
                    insTb.reload();
                });}
            }, 'post');

            data.field.id = tabledata.id;
            data.field.num = num1;
            admin.req(getProjectUrl() + 'goods/edit', JSON.stringify(data.field), function(res){
         /*       layer.msg("购买成功{"+data.field.goodsname+'*'+data.field.num+"}", {icon: 1, time: 1000}, function () {
                    layer.close(layIndex);
                });*/
            }, 'post');

            data.field.id = data.field.orderid;
            data.field.buy = "{"+data.field.goodsname+'＊'+data.field.num+"}";
            data.field.buyprice = cost;
            data.field.num = $('[name="num"]').val();
            data.field.cost = 200;
            admin.req(getProjectUrl() + 'order/edit1', JSON.stringify(data.field), function(res){
                /*       layer.msg("购买成功{"+data.field.goodsname+'*'+data.field.num+"}", {icon: 1, time: 1000}, function () {
                           layer.close(layIndex);
                       });*/
            }, 'post');
            return false;
        });

    });
</script>
</body>
</html>
